<template>
  <!-- <div class="cockpit" :style="{backgroundImage: `url(${require('@/assets/Image/cockpit-bg.png')})`}"> -->
  <div class="cockpit" :style="{backgroundColor: theme.label, height: isFull ? '100vh' : 'auto'}">
    <!-- <div class="mb"></div> -->
    <div class="map-bg" :style="{backgroundImage: `url(${require('@/assets/Image/'+theme.map+'.png')}`}">
      <a>
        <!-- <img :src="require(`@/assets/Image/${theme.map}.png`)" width="70%" alt=""></img> -->
      </a>
    </div>

    <div class="cockpit-header">
      <div class="cockpit-fullscreen cockpit-fullscreen--redo" @click="refresh"> <a-icon type="redo"></a-icon> 刷新 </div>

      <div class="cockpit-fullscreen" @click="changeFull"> <img :src="require('@/assets/Image/fullscreen.png')" width="10px" alt=""> {{ isFull ? '退出全屏' : '全屏查看' }} </div>

      <div class="logo-title" @click="$router.push('/')">“甬网智享”网络空间综合治理智控平台</div>
      <div class="cockpit-title" :style="{fontSize: `${fs}px`, backgroundImage: `url(${require('@/assets/Image/'+ theme.value +'.png')})`}">
        <div class="ellipsis-2">
          {{ title | htmlFilter }}
        </div>
        <a-dropdown placement="topCenter">
          <div class="cockpit-down" @click="e => e.preventDefault()">
            <a-icon type="caret-down" />
          </div>
          <a-menu slot="overlay" class="theme-drap theme-drap2">
            <a-menu-item v-for="(item) in urgentMatter" :key="item.id">
              <div @click="selectEvent(item)" :class="['theme-flex cockpit-down-span']">
                <!-- <div class="theme-rect" :style="{backgroundColor: item.label}"></div> -->
                <span>{{ item.title }}</span>
              </div>
            </a-menu-item>
          </a-menu>
        </a-dropdown>

      </div>
      <div class="cockpit-info">
        <div class="cockpit-info--text theme">
          <a-dropdown placement="bottomCenter">
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
              <div class="theme-rect" :style="{backgroundColor: theme.color}">{{ theme.name }}<a-icon style="color: #5DA2F4;margin-left: 3px;font-size: 12px;" type="caret-down" /></div>
            </a>
            <a-menu slot="overlay" class="theme-drap">
              <a-menu-item v-for="(item, i) in themeArr" :key="item.value">
                <div @click="selectTheme(item)" :class="['theme-flex', `theme-flex${i}`]">
                  <!-- <div class="theme-rect" :style="{backgroundColor: item.label}"></div> -->
                  <span>{{ item.name }}</span>
                </div>
              </a-menu-item>
            </a-menu>
          </a-dropdown>

        </div>
        <div class="cockpit-info--text">
          <span>互联网版</span>
        </div>
        <div class="cockpit-info--text cockpit-time">
          {{ nowTime }}
        </div>
        <!-- <div class="cockpit-info--text">
          <span>{{ time.currentAddress }}</span>
        </div> -->
        <div class="cockpit-info--text">
          <p>{{ time.currentDate }}</p>
          <p>{{ time.currentWeek }}</p>
        </div>
      </div>
    </div>
    <div class="cockpit-content">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>

    <h-modal-dark class="modal-dark" v-model="show" >
      <h1>{{ modalForm.title }}</h1>
      <p>
        来源：{{ modalForm.source }}
        <a-divider type="vertical"></a-divider>
        发文时间：{{ modalForm.createTime }}
      </p>

      <div class="modal-content modal-content-flex">
        <div>
          <img @click="showImage = true" v-if="modalForm.img" :src="modalForm.img" style="margin: 12px auto;cursor: pointer" alt="">
          <video v-if="modalForm.videoUrl" :src="modalForm.videoUrl" style="margin: 12px auto" />
        </div>
        <div v-html="modalForm.content || modalForm.describe"></div>
      </div>

    </h-modal-dark>

    <h-modal-dark class="modal-dark" v-model="showjudge" >
      <h1>研判时间：{{ modalForm.createTime }}</h1>
      <p class="modal-content" style="text-indent: 0">
        研判内容： <br>
        <span v-html="modalForm.content">

        </span>
      </p>
    </h-modal-dark>

    <h-modal-dark class="modal-dark hmodal-dark-iframe" v-model="showIframe">
      <h1>{{ iframeData.title }}</h1>
      <p>
        发文时间：{{ iframeData.createTime }}
      </p>
      <iframe class="iframe" :src="iframeURL" frameborder="0"></iframe>
    </h-modal-dark>

    <a-modal v-model="showImage" width="90%" title="图片预览">
      <img :src="modalForm.img" width="100%" alt="">
    </a-modal>
  </div>
</template>
<script>
import moment from 'moment';
import { getNumberdetails, eventDetail, queryTime, getEventEmergencyList } from '@/api/serve';
// eslint-disable-next-line no-unused-vars
import { requestFullscreen, exitFullScreen } from '@/utils/common';

let sTime = '';
export default {
  components: {},
  inject: ['refresh'],
  provide() {
    return {
      updateTitle: this.updateTitle,
      getNumberdetails: this.getNumberdetails,
      goback: this.goback,
      getIsFull: this.getIsFull,
      getDesDetail: this.getDesDetail,
      showIframeModal: this.showIframeModal,
      getJudgeDetail: this.getJudgeDetail,
      toLink: this.toLink,
      getDate: () => {
        return this.time && this.time.currentDate;
      },
      getDetail: () => {
        return this.detail;
      },
      getTheme: () => {
        return this.theme;
      }
    };
  },
  data() {
    return {
      moment,
      showImage: false,
      showIframe: false,
      iframeURL: '',
      theme: {
        value: 'header-bg',
        label: 'rgb(4,11,36)',
        map: 'hs',
        name: '经典黑'
      },
      themeArr: [
        {
          value: 'header-bg',
          label: 'rgb(4,11,36)',
          name: '经典黑',
          map: 'hs'
        },
        {
          value: 'header-bg2',
          label: '#0f2c2f',
          name: '深空绿',
          map: 'ls'
        },
        {
          value: 'header-bg3',
          label: 'rgb(2,19,35)',
          name: '优雅蓝',
          map: 'lns'
        },
        {
          value: 'header-bg4',
          label: 'rgb(8,2,36)',
          name: '绚丽紫',
          map: 'zs'
        }
      ],
      nowTime: moment(new Date()).format('HH:mm:ss'),
      show: false,
      showjudge: false,
      week: () => { // 参数时间戳
        const week = moment(new Date()).day();
        switch (week) {
          case 1:
            return '星期一';
          case 2:
            return '星期二';
          case 3:
            return '星期三';
          case 4:
            return '星期四';
          case 5:
            return '星期五';
          case 6:
            return '星期六';
          case 0:
            return '星期日';
        }
      },
      active: 0,
      id: '',
      title: '',
      modalForm: {},
      detail: {},
      time: {},
      isFull: false,
      iframeData: {},
      urgentMatter: [],
      reload: true
    };
  },
  watch: {
    '$route.path'(to) {
      console.log(to, 'toooo');
      if (to == '/cockpit/home') {
        this.title = this.$route.query.title;
      }
    }
  },
  beforeDestroy() {
    sTime && clearInterval(sTime);
  },
  updated() {
    // this.title = this.$route.query.title;
  },
  created() {
    this.id = this.$route.query.id;
    this.title = this.$route.query.title;
    this.eventDetail();
    this.queryTime();
    this.geturgentMatter();
  },
  mounted() {
    document.addEventListener('webkitfullscreenchange', (e) => {
      console.log(document.fullscreenElement, e);
    });
    // window.onresize = (e) => {
    //   if (document.documentElement.clientHeight > 500) {
    //     this.isFull = true;
    //   } else {
    //     this.isFull = false;
    //   }
    // };
  },
  computed: {
    fs() {
      return this.title.length > 14 ? 30 : 40;
    }
  },
  methods: {
    // 当前发生的应急事件
    geturgentMatter() {
      getEventEmergencyList().then(res => {
          this.urgentMatter = res.data;
      });
    },
    selectEvent({ id, title }) {
      this.$router.replace({ path: '/cockpit/home', query: { id, title } });
      this.refresh();
    },
    getIsFull() {
      return this.isFull;
    },
    toLink({ link }) {
      if (link) window.open(link);
    },
    updateTitle(title) {
      this.title = title;
    },
    showIframeModal(url, iframeData) {
      if (url) {
        window.open(url);
      }
      // this.showIframe = true;
      // this.iframeURL = url;
      // this.iframeData = iframeData;
    },
    getNumberdetails({ id }) {
      getNumberdetails({ id }).then(res => {
        res.data.createTime = res.data.reaseTime;
        this.modalForm = res.data;
        this.show = true;
      });
    },
    getDesDetail({ id }) {
      eventDetail({ id }).then(res => {
        this.modalForm = res.data;
        this.show = true;
      });
    },
    getJudgeDetail(record) {
      this.modalForm = record;
      this.showjudge = true;
    },
    goback() {
      this.$router.go(-1);
    },
    eventDetail() {
      eventDetail({
        id: this.id
      }).then(res => {
        Object.assign(this.detail, res.data || {});
      });
    },
    queryTime() {
      queryTime().then(res => {
        this.time = res.data;
        const year = moment().format('YYYY-');
        const { currentTime, currentDate } = res.data;
        let time = new Date(`${year}${currentDate} ${currentTime}`).getTime();
        sTime = setInterval(() => {
          time += 1000;
        this.nowTime = moment(time).format('HH:mm:ss');
      }, 1000);
      });
    },
    selectTheme(e) {
      console.log(e);
      this.theme = e;
    },
    changeFull() {
      if (!document.fullscreenElement) {
        requestFullscreen();
        this.isFull = true;
      } else {
        exitFullScreen();
        this.isFull = false;
      }
    }
  }
};
</script>
<style lang="less">
  .iframe {
      width: 100%;
      height: 80%;
      background: #fff;
    }
  .cockpit {
    background-size: 100% 100%;
    background-position: top center;
    // height: 100vh;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: rgb(4,11,36);
    .map-bg {
      width: 70%;
      height: 900px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-64%, -50%);
      pointer-events: none !important;
      z-index: 1;
      background-size: 100% auto;
      background-position: center;
      img {
        pointer-events: none !important;
      }
    }
    .mb {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      // background: #000;
      z-index: 2;
    }
    .cockpit-header {
      font-size: 40px;
      font-weight: 400;
      font-style: italic;
      color: #D9F8FF;
      line-height: 34px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 122;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 30px 42px;
      box-sizing: border-box;
      .cockpit-title {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-52%, 0);
        width: 1260px;
        height: 100px;
        line-height: 1.2;
        text-align: center;
        letter-spacing: 6px;
        // text-indent: 48px;
        background: url('~@/assets/Image/header-bg.png');
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        >div {
          max-width: 600px;
          margin-left: 48px;
          margin-top: -12px;
        }
      }
      .logo-title {
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 2px;
        position: relative;
        z-index: 2;
        cursor: pointer;
      }
      .cockpit-info {
        display: flex;
        font-style: normal;
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 11px;
        text-align: center;
        // flex-basis: 500px;
        // border: 1px solid #fff;
        align-items: center;
        position: relative;
        z-index: 2;
        margin-right: -24px;
        margin-top: 8px;
        >div {
          height: 32px;
          border-right: 1px solid #fff;
          padding: 0 9px;
          &:first-child,&:nth-child(2),&:nth-child(3) {
            display: flex;
            align-items: center;
          }
          >p {
            margin: 0;
            &:first-child {
              margin-bottom: 6px;
            }
          }
        }
      }
    }
    .cockpit-content {
      margin-top: 140px;
      padding: 0 30px;
      box-sizing: border-box;
      margin-left: -20px;
      position: relative;
      z-index: 8;
      // border: 1px solid #fff;
      .cockpit-card-title {
        height: 40px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        font-size: 18px;
        font-weight: 500;
        font-style: italic;
        color: #FFFFFF;
        padding: 10px 30px;
        box-sizing: border-box;
        line-height: 1;
        letter-spacing: 1px;
        position: relative;
        .cockpit-card-title-more {
          position: absolute;
          font-size: 14px;
          font-weight: 400;
          font-style: italic;
          color: #48AAFB;
          line-height: 1;
          right: 30px;
          top: 13px;
          cursor: pointer;
        }
        >span {
          margin-right: 50px;
          cursor: pointer;
          color: #fff;
          opacity: 0.7;
          &.active {
            color: #fff;
            opacity: 1;
          }
        }
      }
      .c-card--title {
        font-size: 20px;
        font-weight: 500;
        color: #D4F3FD;
      }
      .c-card--text {
        font-size: 14px;
        font-weight: 400;
        color: #D9F8FF;
        line-height: 1.4;
        margin-top: 5px;
      }
      .c-card--detail {
        font-size: 12px;
        font-weight: 400;
        color: #48AAFB;
        line-height: 1;
        position: absolute;
        right: 20px;
        bottom: 12px;
        cursor: pointer;
      }
      .c-card--num {
        width: 98%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 32px;
        &.empty-dark {
          text-align: center;
          color: rgba(255,255,255,0.5);
          width: 100%;
          justify-content: center !important;
          margin-top: 0px;
          font-size: 15px;
          position: absolute;
          top: 50%;
          transform: translate(0, -50%);
          left: 0;
        }
        >div {
          p {
            margin: 0;
            text-align: center;
          }
          >p:first-child {
            font-size: 24px;
            font-weight: 500;
            color: #5DA2F4;
            line-height: 22px;
          }
          >p:last-child {
            font-size: 14px;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 13px;
            margin-top: 16px;
          }
        }
      }
    }

    .hot-each {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
      position: relative;
      &:nth-child(5) {
        margin-top: 8px;
      }

      // &::before {
      //   content: ' ';
      //   position: absolute;
      //   width: 14px;
      //   height: 14px;
      //   border: 1px solid #5CA1F2;
      //   border-radius: 100%;
      //   left: 30px;
      // }
      // &::after {
      //   content: ' ';
      //   position: absolute;
      //   width: 1px;
      //   height: 43px;
      //   background: #395a81;
      //   left: 37px;
      //   top: 29px;
      // }
      // &:last-child {
      //   &::after {
      //     display: none;
      //   }
      // }

      .h-list--order-text {
        color: #fff;
        font-size: 15px;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background: #36414F;
        line-height: 20px;
        text-align: center;
        // font-weight: bold;
      }
      .h-list--order-1 {
        .h-list--order-text {
          background: #E19F29;
        }

      }
      .h-list--order-2 {
        .h-list--order-text {
          background: #85939F;
        }
      }
      .h-list--order-3 {
        .h-list--order-text {
          background: #B46949;
        }
      }
      .h-list--order-4 {
        .h-list--order-text {
          background: #36414F;
        }
      }
      .title {
        // height: 23px;
      }
      .h-list--order {
        height: 20px;
      }

      .hot-each--content {
        margin-left: 38px;
        width: 84%;
        h1 {
          width: 100%;
          font-size: 12px;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 24px;
          margin: 0;
          cursor: pointer;
          transition: all 0.3s;
          &:hover {
            color: #48AAFB;
          }
        }
        p {
          font-size: 12px;
          font-weight: 400;
          color: #CBCBCB;
          line-height: 24px;
          margin: 0;
        }
      }
    }

  }

  .modal-dark {
    h1 {
      font-size: 23px;
      font-weight: 400;
      color: #EBEEF6;
      margin-bottom: 25px;
      text-align: center;
      color: #fff;
    }
    p {
      font-size: 14px;
      font-weight: 400;
      color: #1165F3;
      text-align: center;
      margin-bottom: 35px;
    }
    .modal-content-flex {
      display: flex;

      >div:first-child {
        flex-shrink: 0;
        width: 300px;
        margin-right: 60px;
      }
      img,video {
        width: 100%;
        pointer-events: all !important;
      }
    }
    .modal-content {
      font-size: 16px;
      font-weight: 400;
      color: #EBEEF6;
      line-height: 30px;
      text-indent: 2em;
      max-height: 400px;
      overflow-y: auto;
      padding-right: 20px;
      margin-left: 20px;
      text-align: left;
      &::-webkit-scrollbar {
        width: 13px;
        // height: 224px;

      }
      &::-webkit-scrollbar-thumb {
        background: #154DA2;
        border-radius: 7px;
      }
      &::-webkit-scrollbar-track {
        border-radius: 7px;
        background: transparent;
      }
    }
    .ant-divider  {
      background: #1890FF;
    }
  }

  .modal-dark {
    h1 {
      font-size: 23px;
      font-weight: 400;
      color: #EBEEF6;
      margin-bottom: 25px;
      text-align: center;
      color: #fff;
    }
    p {
      font-size: 14px;
      font-weight: 400;
      color: #1165F3;
      text-align: center;
      margin-bottom: 35px;
    }
    .modal-content {
      font-size: 16px;
      font-weight: 400;
      color: #EBEEF6;
      line-height: 30px;
      text-indent: 2em;
      max-height: 400px;
      overflow-y: auto;
      padding-right: 20px;
      margin-left: 20px;
      text-align: left;
      &::-webkit-scrollbar {
        width: 13px;
        // height: 224px;

      }
      &::-webkit-scrollbar-thumb {
        background: #154DA2;
        border-radius: 7px;
      }
      &::-webkit-scrollbar-track {
        border-radius: 7px;
        background: transparent;
      }
    }
    .ant-divider  {
      background: #1890FF;
    }
  }
  .dark-back {
    text-align: center;
    font-size: 26px;
    color: #fff;
    margin-top: 10px;
    cursor: pointer;
  }

  .theme-rect {
    cursor: pointer;
    width: 73px;
    height: 24px;
    border: 1px solid rgba(77, 211, 249, 0);
    background: linear-gradient(0deg, rgba(0, 150, 255, 0.6) 0%, rgba(23, 94, 148, 0.6) 56.00000000000001%, rgba(2, 29, 52, 0.6) 100%);
    // opacity: 0.6;
    border-radius: 1px;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #FFFFFF;
    text-align: center;
    padding: 0 !important;
    box-sizing: border-box;
    .anticon  {
      margin-right: -4px;
    }
  }
.cockpit-time {
  font-size: 32px;
  margin-top: 0;
  padding: 0;
  line-height: 32px;
  margin-top: -2px;
}
.cockpit-fullscreen {
  width: 82px;
  height: 22px;
  background: rgba(93, 162, 244, 0.26);
  // opacity: 0.26;
  border-radius: 5px;
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 13px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 22px;
  font-style: normal;
  text-align: center;
  cursor: pointer;
  img {
    margin-top: -2px;
  }
}
.cockpit-down {
  position: absolute;
  right: 50%;
  transform: translate(360px, 0);
  width: 30px;
  height: 30px;
  background: #1E3C83;
  border-radius: 100%;
  color: #fff;
  text-align: center;
  line-height: 34px;
  font-size: 15px;
  cursor: pointer;
  &:hover {
    opacity: 0.7;
  }
}
.cockpit-down-span {
  &:hover {
    color: #48AAFB;
  }
}
img {
  pointer-events: none;
}
</style>
<style lang="less">
  .theme-drap {
    padding: 0 !important;
    // background: rgba(255,255,255,0.3);
    background: rgba(2, 17, 18, 0.7);
    // border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 20px inset rgba(49, 84, 137, 0.5), -0 -0 20px inset rgba(49, 84, 137, 0.5);
    box-sizing: border-box;
    .ant-dropdown-menu-item {
      padding: 0 !important;
      &:hover {
        background: none !important;
      }
    }
  }
  .theme-drap2 {
    border: 1px solid #48AAFB;
  }
  .theme-flex {
    display: flex;
    color: #fff;
    padding: 4px 14px;
    font-size: 14px;
    // border-top: 1px solid rgba(255,255,255,0.5);
    &.theme-flex0{
      border: none;
    }
    >span {
      // margin-left: 12px;
    }
  }

  .hmodal-dark-iframe {
    &.hmodal.hmodal-dark .ant-modal {
      width: 90% !important;
      top: 20px !important;
    }
    .dark-modal-content {
      height: 800px !important;
    }

  }

  .cockpit-fullscreen--redo {
    right: 100px;
    width: 66px;
  }
</style>
